<script setup>
import {reactive} from "vue";

//输入不同的年龄 页面提示改变
const user = reactive({userName:'张三',age:22})

const goods = reactive([
  {id:1,goodsName:'苹果手机',price:1000},
  {id:2,goodsName:'苹果手机',price:1000},
  {id:3,goodsName:'苹果手机',price:1000},
  {id:4,goodsName:'苹果手机',price:1000},
])

</script>

<template>
  <h4>vue:不像jQuery那样需要操作HTML结构 只需要操作数据即可实现HTML结构变化---->响应式、双向数据绑定</h4>
  <span v-if="user.age > 60 ">老年人</span>
  <span v-else-if="user.age > 40">中年人</span>
  <span v-else-if="user.age > 18">青年人</span>
  <span v-else>青少年</span>
  <br/>
  用户名:{{user.userName}}<br/>
  年龄:<input type="text" v-model="user.age"><br/>
  goods:{{goods}}<br/>

  <table border="1">
    <tr>
      <td>ID</td>
      <td>goodsName</td>
      <td>price</td>
    </tr>
    <tr v-for="g in goods">
      <td v-text="g.id"></td>
      <td>{{g.goodsName}}</td>
      <td v-text="g.price"></td>
    </tr>
  </table>

</template>
